<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leiyan</title>
    <style type="text/css">
        a:link{
            color: honeydew;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: blue;
            transition: color 0.5s;
        }
        a:focus{
            color: yellow;
        }
        a:active{
            color: honeydew;
        }

        input {
            outline: none;
            padding: 12px;
            border-radius: 3px;
            border: 1px solid black;
        }
        ::-webkit-input-placeholder { /* Chrome */
            color: cornflowerblue;
            transition: opacity 250ms ease-in-out;
        }
        :focus::-webkit-input-placeholder {
            opacity: 0.5;
        }
        :-ms-input-placeholder { /* IE 10+ */
            color: cornflowerblue;
            transition: opacity 250ms ease-in-out;
        }
        :focus:-ms-input-placeholder {
            opacity: 0.5;
        }
        ::-moz-placeholder { /* Firefox 19+ */
            color: cornflowerblue;
            opacity: 1;
            transition: opacity 250ms ease-in-out;
        }
        :focus::-moz-placeholder {
            opacity: 0.5;
        }
        :-moz-placeholder { /* Firefox 4 - 18 */
            color: cornflowerblue;
            opacity: 1;
            transition: opacity 250ms ease-in-out;
        }
        :focus:-moz-placeholder {
            opacity: 0.5;
        }
    </style>
</head>
<body>
<input placeholder="Search">
<a href="#">testtesttest</a>
</body>
</html>